<template>
  <div class="contect">
    <van-row>
      <van-col span="3">
        <van-icon name="bars" size="30px" style="margin-top: 10px;" />
      </van-col>
      <van-col span="18">
        <van-search v-model="keyworld" shape="round" background="azure" placeholder="请输入搜索关键词" />

      </van-col>
      <van-col span="3">
        <van-icon name="friends" size="30px" style="margin-top: 10px;" />
      </van-col>
    </van-row>

  </div>


  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="search">分类</van-tabbar-item>
    <van-tabbar-item icon="friends-o">购物车</van-tabbar-item>
    <van-tabbar-item icon="setting-o">个人中心</van-tabbar-item>
  </van-tabbar>
</template>
<script setup>
import { ref } from 'vue';
const active = ref(0);

const keyworld = ref('')
console.log(keyworld);

</script>

<style scoped>
.contect{
  height: 100vh;
  background-color: azure;

}
</style>
